<template>
  <div class="person">
    <h1>我是Person组件</h1>
    <ul>
      <li>姓名：{{name}}</li>
      <li>年龄：{{age}}</li>
      <li>资产：{{money}}</li>
    </ul>
    <button @click="demo">看看Person的vc</button>
    <button @click="change1">修改姓名</button>
    <button @click="change2">修改资产</button>
    <button @click="change3">修改对外年龄</button>
    <button @click="change4">修改真实年龄</button>
    <button @click="change5">修改年龄</button>
    
  </div>
</template>

<script>
  export default {
    name:'Person',
    /* data() {
      return {
        name:'小high'
      }
    }, */
    props:['name','money','age'],
    methods: {
      demo(){
        console.log('@',this)
      },
      change1(){
        this.name = 'xiao-high'
      },
      change2(){
        this.money = 10
      },
      change3(){
        this.age.foreignAge = 18
      },
      change4(){
        this.age.realAge = 108
      },
      change5(){
        this.age = {foreignAge:8,realAge:9999}
      }
    },
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    padding: 20px;
  }
</style>